<template>
    <div>
        <div>
            <div class="box">
                <template v-if="chartList.length">
                    <div  v-for="(elm, key) in chartList" :key="key">
                        <Divider v-if="key>0" color="#dcdee2"></Divider>
                        <div v-for="(item, index) in elm" :key="index" style="margin-top:10px">
                            <div style="margin-bottom: 6px;font-size:13px;color:#a7a3a3">
                                <span>{{
                                    item.sender_type === "0"
                                    ? "客服 - " +
                                    (item.user_real_name
                                    ? item.user_real_name
                                    : item.from_id)
                                    : "患者"
                                    }}</span>
                                <span style="margin-left:20px">{{
                                    item.receive_time
                                    }}</span>
                            </div>
                            <img @click="seeBIg(item.message)" style="width: 100px;object-fit: cover;"
                                v-if="item.message.startsWith('https://')" :src=" item.message" alt="">
                            <div v-else style="font-weight:600;width:300px;word-break:break-all ">{{
                                item.message
                                }}</div>
                        </div>                        
                    </div>
                    
                </template>
                <div class="noContent" v-else>暂无数据</div>
            </div>
        </div>
        <Modal v-model="imgModel" footer-hide>
            <p slot="header">
                查看大图
            </p>
            <img :src="src" style="width: 100%;object-fit: cover;" />
        </Modal>
    </div>
</template>
<script>
    import { communicateMessage } from "@/api/hqapi";
    import dayjs from "dayjs";

    export default {
        name: "chartList",
        data() {
            return {
                imgModel: false,
                src: "",
                eChartTotal: 0,
                chartList: [],
                params: {
                    page: 1,
                    patient_user_id: "",
                    pageSize: 1000,
                },
            };
        },
        filters: {
            timeFormat(data) {
                return dayjs(data.created_at * 1000).format("YYYY-MM-DD");
            },
        },
        methods: {
            seeBIg(item) {
                this.src = item
                this.imgModel = true
            },
            askData(id) {
                this.chartList = [];
                this.$set(this.params, "patient_user_id", id);
                this.askDatas();
            },
            askDatas() {
                communicateMessage(this.params).then((res) => {
                    // this.eChartTotal = res.total;
                    this.chartList = res;
                });
            },
        },
    };
</script>
<style scoped>
    .box {
        height: calc( 100vh - 372px);
        overflow: auto;
    }

    .noContent {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>